<template>
	<view class="search-page">
		<view class="status_bar" :style="{ height: iStatusBarHeight + 'px'}">
	            <!-- 这里是状态栏 -->
		</view>
		<fui-toast ref="toast"></fui-toast>
		<view class="search-body">
			<view class="search-body-content">
				<view class="search-banner-body">
					<view class="search-banner">
						<view class="banner-left">
							<image src="../../static/images/arrow-left-black.png" mode="heightFix" @click="backToIndex()"></image>
							<view class="input-content" >
								<input type="text" v-model="userInputInfo" placeholder="请输入搜索词" focus="true"/>
							</view>
						</view>
						<view class="banner-right">
							<view class="clean-input-all" v-show="showCleanBtnFlag" @click="cleanAll">
								<image src="../../static/images/clean-input.png" mode="heightFix"></image>
							</view>
							<image src="../../static/images/search-black.png" mode="heightFix" @click="searchArticleByTitle"></image>
						</view>
					</view>
				</view>

				
				<view class="search-history">
					<view class="search-history-title">
						<text>历史搜索</text>
						<view class="rubbish">
							<image src="../../static/images/rubbish.png" mode="heightFix"></image>
						</view>
					</view>
					<view class="search-history-content">
						<view class="search-history-item">
							<view class="search-history-item-content">
								<button type="default">无语</button>
							</view>
						</view>
					</view>
				</view>
				
				
				
				<view class="search-hot">
					<view class="search-hot-title">
						<text>热门搜索</text>
					</view>
					<view class="search-hot-content">
						<view class="hot-right">
							<view class="hot-item">
								<text>无语</text>
							</view>
						</view>
						<view class="hot-left">
							<view class="hot-item">
								<text>无语</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			

		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import userApi from '@/static/assets/js/userApi.js'
	import { ref,watch,getCurrentInstance,reactive } from 'vue'
	const that = getCurrentInstance()
	const toastOptions = reactive({
		text:"功能还未实现"
	})
	
	const searchReturnList = reactive({
		
	})
	
	const iStatusBarHeight = ref(0)
	onLoad(()=>{
		iStatusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	})
	
	const userInputInfo = ref("")
	const showCleanBtnFlag = ref(false)
	watch(userInputInfo,(newValue,oldValue)=>{
		if(newValue !== ""){
			showCleanBtnFlag.value = true 
			userInputInfo.value = newValue;
		}else{
			showCleanBtnFlag.value = false 
		}
	})
	
	const cleanAll = () =>{
		userInputInfo.value = ""
	}
	const backToIndex = () =>{
		uni.navigateBack({
			
			success() {
				
			}
		})
	}

	const searchArticleByTitle = () =>{
		userApi.searchArticle(userInputInfo.value).then((resp)=>{
			if(resp.length==0){
				toastOptions.text = "未查询到结果!w(ﾟДﾟ)w"
				that.ctx.$refs.toast.show(toastOptions)
			}else{
				console.log(resp);
				uni.navigateTo({
					url:"/pages/searchResult/searchResult?searchReturnList="+JSON.stringify(resp)
				})
			}
		})
	}




	
</script>

<style lang="scss" scoped>
	
	uni-image{
		height: 100%;
	}
	
	uni-button[type="default"]{
		font-size: 25rpx;
	}
	
	button::after {
		 border: none;
	}
	
	.search-page{
		// width: 100%;
		display: flex;
		flex-direction: column;
		// align-items: center;
		.search-body{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			.search-body-content{
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 95%;
				>.search-banner-body{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 80rpx;
					background-color: #f7f7f7;
					border-radius: 5rpx;
					>.search-banner{
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 70%;
						width: 95%;
						>.banner-left{
							height: 100%;
							display: flex;
							align-items: center;
							font-size: 35rpx;
							>.input-content{
								margin-left: 20rpx;
								width: 470rpx;
							}
						}
						>.banner-right{
							display: flex;
							// justify-content:center;
							align-items: center;
							height: 100%;
							>.clean-input-all{
								margin-right: 20rpx;;
								display: flex;
								justify-content: center;
								align-items: center;
								height: 50%;
							}
						}
					}
				}
				
				>.search-history{
					margin-top: 50rpx;
					width: 100%;
					>.search-history-title{
						display: flex;
						justify-content: space-between;
						font-size: 30rpx;
						font-weight: 600;
						// height: ;
					}
					>.search-history-content{
						display: flex;
						width: 100%;
						margin-top: 20rpx;
						>.search-history-item{
							background-color: #f7f7f7;
							height: 40rpx;
							>.search-history-item-content{
								height: 80%;
							}
						}
					}
				}
				
				
				>.search-hot{
					width: 100%;
					margin-top: 70rpx;
					>.search-hot-title{
						font-size: 30rpx;
						font-weight: 600;
						// height: ;
					}
					
					>.search-hot-content{
						display: flex;
						>.hot-right{
							width: 50%;
							display: flex;
							flex-direction: column;
							>.hot-item{
								width: 100%;
							}
						}
						>.hot-left{
							width: 50%;
							display: flex;
							flex-direction: column;
							>.hot-item{
								width: 100%;
							}
						}
					}
				}
				
				
				
				
			}
		}
	}

</style>
